﻿<?php
session_start();
$page = 'inscription';
include('include/header.php');
//include('include/connexion_bdd.php');
?>

<script>
    $(document).ready(function(){
        // On cache le div a afficher :
        $(".adresseError").hide(); 
        $(".codePostalError").hide(); 
        $(".villeError").hide(); 
        $(".nomError").hide(); 
        $(".prenomError").hide();
        $(".telError").hide();
        $(".formError").hide();
    });
    
    function verifAdresse(a){
        if(a.value.length > 2){
            a.style.borderColor='#00A41C';
            $(".adresseError").hide();
            return true;
        }
        else{
            a.style.borderColor='#FE1A01';
            $(".adresseError").show(); 
            return false;
        }
    }
    function verifCodePostal(c){
        var codePostal = parseInt(c.value);
        if(isNaN(codePostal) || c.value.length != 5){
            c.style.borderColor='#FE1A01';
            $(".codePostalError").show(); 
            return false;
        }
        else{
            c.style.borderColor='#00A41C';
            $(".codePostalError").hide();
            return true;
        }
    }
    function verifVille(v){
        if(v.value.length > 2){
            v.style.borderColor='#00A41C';
            $(".villeError").hide();
            return true;
        }
        else{
            v.style.borderColor='#FE1A01';
            $(".villeError").show(); 
            return false;
        }
    }
    function verifNom(n){
        if(n.value.length > 2){
            n.style.borderColor='#00A41C';
            $(".nomError").hide();
            return true;
        }
        else{
            n.style.borderColor='#FE1A01';
            $(".nomError").show(); 
            return false;
        }
    }
    function verifPrenom(p){
        if(p.value.length > 2){
            p.style.borderColor='#00A41C';
            $(".prenomError").hide();
            return true;
        }
        else{
            p.style.borderColor='#FE1A01';
            $(".prenomError").show(); 
            return false;
        }
    }
    function verifTel(t){
        var tel = parseInt(t.value);
        if(isNaN(tel) || t.value.length != 10){
            t.style.borderColor='#FE1A01';
            $(".telError").show()
            return false;; 
        }
        else{
            t.style.borderColor='#00A41C';
            $(".telError").hide();
            return true;
        }
    }
    function verifForm(f)
    {
       
        var adresseOk = verifAdresse(f.adresse);
        var codePostalOk = verifCodePostal(f.codePostal);
        var villeOk = verifVille(f.ville);
        var nomOk = verifNom(f.nomUrgence);
        var prenomOk = verifPrenom(f.prenomUrgence);
        var telOk = verifTel(f.telephone);
        if( adresseOk==true && codePostalOk==true && villeOk==true && nomOk==true && prenomOk==true && telOk==true){
            
            return true;
        
        }
        else{
            $(".formError").show();
            return false;
        }
    
   
    }
</script>
<body>
    <?php
    if (isset($_SESSION['login'])) {
        ?>
        <div id="content">
            <span class="titre">Formulaire d'inscription pour Marchaux Classic Freeride</span>

            <form  method=POST action="marchaux.php"  onsubmit="return verifForm(this)">
                <div class="formMarchaux">
                    <div class="champForm">
                        <!--Discipline-->
                        <div class="sousTitre"><img class="vertical_image" src="assets/image/suivant.png" width="30px"> <b>Discipline :</b></div></br>
                        <div class="formGauche"><img src="assets/image/puce.png"/> Longboard </div><div class="formDroite"><input type="radio" name="discipline" value="longboard" id="discipline"></div>
                        <div class="formGauche"><img src="assets/image/puce.png"/> Roller</div><div class="formDroite"> <input type="radio" name="discipline" value="roller" id="discipline"></div>
                        <div class="formGauche"><img src="assets/image/puce.png"/> Luge</div><div class="formDroite"> <input type="radio" name="discipline" value="luge" id="discipline"></div>
                        <div class="formGauche"><img src="assets/image/puce.png"/> Buttboard</div><div class="formDroite"> <input type="radio" name="discipline" value="buttboard" id="discipline"></div>
                        <div class="formGauche"><img src="assets/image/puce.png"/> Skullboard</div><div class="formDroite"> <input type="radio" name="discipline" value="skullboard" id="discipline"></div></br>
                    </div>
                    <div class="champForm">
                        <!--Adresse-->
                        <div class="sousTitre"><img class="vertical_image" src="assets/image/suivant.png" width="30px"> <b>Adresse Postale du participant :</b></div></br>
                        <div class="formEspace"><div class="formGauche"><img src="assets/image/puce.png"/> Adresse</div><div class="formDroite"> <input type="text" class="input_inscription" name="adresse" onclick="this.style.borderColor='#D2873C';" onblur="verifAdresse(this)"><div class="adresseError"><img src="assets/image/attention.png" class="vertical_image" width="25px"> Ce champ n'est pas rempli correctement !</div></div></div>
                        <div class="formEspace"><div class="formGauche"><img src="assets/image/puce.png"/> Code Postale</div><div class="formDroite"> <input type="text" class="input_inscription" name="codePostal" onclick="this.style.borderColor='#D2873C';" onblur="verifCodePostal(this)"><div class="codePostalError"><img src="assets/image/attention.png" class="vertical_image" width="25px"> Ce champ n'est pas rempli correctement !</div></div></div>
                        <div class="formEspace"><div class="formGauche"><img src="assets/image/puce.png"/> Ville</div><div class="formDroite"> <input type='text' class="input_inscription" name="ville" onclick="this.style.borderColor='#D2873C';" onblur="verifVille(this)"><div class="villeError"><img src="assets/image/attention.png" class="vertical_image" width="25px"> Ce champ n'est pas rempli correctement !</div></div></div>
                    </div>



                    <div class="champForm">
                        <!--Personne à prévenir-->
                        <div class="sousTitre"><img class="vertical_image" src="assets/image/suivant.png" width="30px"> <b>Personne à prévenir en cas d'urgence :</b></div></br>
                        <div class="formEspace"><div class="formGauche"><img src="assets/image/puce.png"/> Nom</div><div class="formDroite"> <input type="text" class="input_inscription" name="nomUrgence" onclick="this.style.borderColor='#D2873C';" onblur="verifNom(this)"><div class="nomError"><img src="assets/image/attention.png" class="vertical_image" width="25px"> Ce champ n'est pas rempli correctement !</div></div></div>
                        <div class="formEspace"><div class="formGauche"><img src="assets/image/puce.png"/> Prénom</div><div class="formDroite"> <input type="text" class="input_inscription" name="prenomUrgence" onclick="this.style.borderColor='#D2873C';" onblur="verifPrenom(this)"><div class="prenomError"><img src="assets/image/attention.png" class="vertical_image" width="25px"> Ce champ n'est pas rempli correctement !</div></div></div>
                        <div class="formEspace"><div class="formGauche"><img src="assets/image/puce.png"/> Téléphone</div><div class="formDroite"> <input type='tel' class="input_inscription" pattern='\d{2}\d{2}\d{2}\d{2}\d{2}' name="telephone" onclick="this.style.borderColor='#D2873C';" onblur="verifTel(this)"><div class="telError"><img src="assets/image/attention.png" class="vertical_image" width="25px"> Ce champ n'est pas rempli correctement !</div></div></div>
                    </div>

                    <div class="champForm">
                        <!--Licence-->
                        <div class="sousTitre"><img class="vertical_image" src="assets/image/suivant.png" width="30px"> <b>Licence FFRS :</b></div></br>
                        <div class="formEspace"><div class="formGauche2">Je possède une licence FFRS : </div><div class="formDroite"> <input type="radio" name="licence" id="licence" value="1"></div></div>
                        <div class="formEspace"><div class="formGauche2">Je <b>ne</b> possède <b>pas</b> une licence FFRS : </div><div class="formDroite"> <input type="radio" name="licence" id="licence" value="non"></div></div>
                    </div>
                </div></br>
                <div class="formError">
                    <img src="assets/image/attention.png" class="vertical_image" width="30px">Le formulaire n'a pas été rempli correctement !
                </div>    
                <div class="bouton_submit">
                    <input class="submit" border=0 src="assets/image/paiement.png" type=image Value=submit align="middle" > 
                </div>
                <span class="attention"><img src="assets/image/attention.png" width="40px" class="vertical_image"> Si vous êtes mineur, pensez bien à ramener une autorisation parental.</span></br></br>
            </form>
        </div>
        <?php
    } else {
        include('include/connexionObligatoire.php');
    }
    ?>
</body>
<?php
include('include/footer.php');
?>